import { PlusOutlined } from '@ant-design/icons';
import { Button, Card, Popconfirm, message } from 'antd';
import { deleteRoomTypeDelete, getRoomTypeList } from './request';
import { ProTable } from '@ant-design/pro-components';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import RoomTypeModal from './components/RoomTypeModal';
import {  useIntl } from '@umijs/max';
// 定义columns的属性类型
export type GithubIssueItem = {
  id: number;
  name: string;
  price: string;
  area: string;
  remark: string;
};

export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

const Room = () => {
  // 表格ref
  const actionRef = useRef<ActionType | null>(null);

  const [info, setInfo] = useState<GithubIssueItem | null>(null);

  const [rowId, setRowId] = useState(0);

  const [modalShow, setModalShow] = useState(false);

  const intl = useIntl()

  // 打开对话框
  const open = (record: GithubIssueItem | null) => {
    if (record) {
      setInfo(record);
      setRowId(record.id);
    }
    setModalShow(true);
  };

  const confirmDel = async (record: GithubIssueItem) => {
    const res: any = await deleteRoomTypeDelete(record.id);
    if (res.code !== 0) {
      message.error(res.msg);
      return;
    }
    message.success(intl.formatMessage({id:"FixLock.Building deleted successfully."}));
    actionRef.current?.reload();
  };

  // 楼栋信息
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: intl.formatMessage({id:"FixLock.Room Type"}),
      dataIndex: 'name',
    },
    {
      title: intl.formatMessage({id:"FixLock.Price"}),
      dataIndex: 'price',
    },
    {
      title:intl.formatMessage({id:"FixLock.Room size"})+'(m²)',
      dataIndex: 'area',
    },
    {
      title: intl.formatMessage({id:"FixLock.remark"}),
      dataIndex: 'remark',
    },
    {
      title:  intl.formatMessage({id:"FixLock.Action"}),
      dataIndex: '',
      align: 'center',
      width:'200px',
      render: (_text, record: GithubIssueItem) => (
        <>
          <Button
            type="link"
            onClick={() => {
              open(record);
            }}
          >
          { intl.formatMessage({id:"FixLock.modify"})}
          </Button>
          <Popconfirm
            key="delete"
            title={intl.formatMessage({id:"FixLock.delete this room type"})}
            description=""
            onConfirm={() => confirmDel(record)}
            okText="ok"
            cancelText="Cancel"
          >
            <a style={{color:'red'}}>  { intl.formatMessage({id:"FixLock.delete"})}</a>
          </Popconfirm>
        </>
      ),
    },
  ];
  return (
    <Card
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div></div>
          <Button
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              open(null);
            }}
          >
            {intl.formatMessage({id:"FixLock.New room type"})}
          </Button>
        </div>
      }
      bordered={false}
      style={{ width: '80%' }}
    >
      <ProTable<GithubIssueItem>
        defaultSize={'large'}
        columns={columns}
        actionRef={actionRef}
        cardBordered={false}
        request={async () => {
          await waitTime(500);
          const res: any = await getRoomTypeList();
          return {
            data: res.data.list,
            success: res.code === 0 ? true : false,
          };
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        rowKey="id"
        search={false}
        options={false}
        dateFormatter="string"
      />
      {modalShow && (
        <RoomTypeModal
          visible={modalShow}
          id={rowId}
          info={info}
          onCancel={() => {
            setRowId(0);
            setModalShow(false);
          }}
          done={function (): void {
            actionRef.current?.reload();
          }}
        />
      )}
    </Card>
  );
};

export default Room;
